<template>
    <v-container :style="fullLayoutWidth ? 'width:100%;' : ''">
        <v-row justify="space-between" class="pt-1" style="border-bottom: 1px solid #E0E0E0; margin: 0">
            <v-subheader class="grey--text text--darken-3" style="font-size: 20px">
                {{ title }}<p style="font-size: 12px; margin-top: 22px; margin-left: 5px;">{{ subtitle }}</p>
            </v-subheader>

            <div>
                <v-btn
                    v-if="!hideCancelButton"
                    text
                    @click="$emit('cancel')"
                >
                    Cancel
                </v-btn>
                <v-btn
                    v-if="!hideSaveButton"
                    color="primary"
                    class="mr-1"
                    @click="$emit('save')"
                >
                    {{ buttonTitle }}
                </v-btn>
                <slot name="extra-button-right">
                    <v-btn
                        v-if="showExtraButton"
                        :color="extraButtonColor"
                        class="mr-1"
                        @click="$emit('extra')"
                        :disabled="disabledExtraButton"
                    >
                        {{ extraButtonTitle }}
                    </v-btn>
                </slot>
                <div class="mr-3"></div>
            </div>
        </v-row>

        <v-container
            style="max-height: 80vh;"
            class="overflow-y-auto"
        >
            <slot />
        </v-container>

    </v-container>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: 'PageLayout',
    props: {
        title: {
            type: String,
            default: 'title',
        },
        subtitle: {
            type: String,
            default: '',
        },
        buttonTitle: {
            type: String,
            default: 'Save',
        },
        hideCancelButton: {
            type: Boolean,
            default: false,
        },
        hideSaveButton: {
            type: Boolean,
            default: false,
        },
        fullLayoutWidth: {
            type: Boolean,
            default: true,
        },

        /* Start Extra Button Properties */
        showExtraButton: {
            type: Boolean,
            default: false,
        },
        extraButtonColor: {
            type: String,
            default: 'secondary',
        },
        extraButtonTitle: {
            type: String,
            default: 'title',
        },
        disabledExtraButton: {
            type: Boolean,
            default: false,
        },
        /* End Extra Button Properties */
    },
});
</script>
